<template>
    <simpleness-layout>
        <a-spin :spinning="this.spinning">
            <a-row>
                <a-col :span="6">
                    <a-card style="height: 75vh;overflow-y: auto;">
                        <QueryTree
                                :handleModel="handleModel"
                                :dataInfo="this.getTreeData"
                                :handleDelete="handleDelete"
                                :treeSelectChange="treeSelectChange"
                                :show-button="false"
                        ></QueryTree>
                    </a-card>
                </a-col>
                <a-col :span="18">
                    <a-card :body-style="{padding:'12px'}" style="height: 75vh;overflow-y: auto;">
                        <component :is="this.currentCom"></component>
                    </a-card>
                </a-col>
            </a-row>
        </a-spin>
    </simpleness-layout>
</template>

<script>
  import QueryTree from "@/components/queryTree/QueryTree";
  import SimplenessLayout from "@/layouts/SimplenessLayout";
  import MenuManageBody from './MenuManageBody'
  import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'

  export default {
    name: "menuManage",
    components: {SimplenessLayout, QueryTree, MenuManageBody},
    data() {
      return {}
    },
    created() {
      this.queryAll()
      this.setState({name: 'currentCom', value: ''})
    },
    computed: {
      ...mapGetters('menuManage', ['getTreeData']),
      ...mapState('menuManage', ['currentCom', 'currentKey', 'spinning', 'title']),
    },
    methods: {
      ...mapMutations('menuManage', ['setState']),
      ...mapActions('menuManage', ['queryAll', 'deleteMenu', 'queryById']),
      treeSelectChange(key) {
        this.setState({name: 'currentKey', value: key[0]})
        if (key[0] != '菜单' && key[0] != undefined ) {
          this.setState({name: 'title', value: '编辑'})
          this.queryById({objectId: this.currentKey})
          this.setState({name: 'currentCom', value: 'MenuManageBody'})
        }else {
          this.setState({name: 'currentCom', value: ''})
        }
      },
      handleModel(title) {
        if (this.currentKey != '菜单') {
          this.setState({name: 'title', value: title})
          if (title == '编辑') {
            this.queryById({objectId: this.currentKey})
          }
        } else {
          if (title == '编辑') {
            this.$message.warning('不可编辑')
            return
          }
          this.setState({name: 'title', value: title})
        }
        this.setState({name: 'editData', value: null})
        this.setState({name: 'currentCom', value: 'MenuManageBody'})
      },
      handleDelete(key) {
        if (this.currentKey != '菜单') {
          this.deleteMenu(key)
        } else {
          this.$message.warning('不支持删库跑路！！！')
        }
      }
    }
  }
</script>

<style scoped>

</style>